<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/images/cesare.jpeg" th:href="@{/images/cesare.jpeg}" rel="icon" type="image/x-ico">
    <title>明月几时有</title>
</head>
<body>
   <!--导航-->
   <nav th:replace="_fragments :: menu(1)"></nav>
   <!--导航-->

   <!--中间内容-->
   <div class="m-container m-padded-tb-big ">
       <div class="ui container">
           <div class="ui stackable grid">
               <!--左边-->
               <div class="eleven wide column">
                   <div class="ui top attached segment">
                       <div class="ui middle aligned two column grid">
                           <div class="column">
                               <h3 class="ui teal header">博客</h3>
                           </div>
                           <div class="right aligned column">
                               共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${pageInfo.total}">14</h2>篇
                           </div>
                       </div>
                   </div>
                   <!--中间内容-->
                   <div class="ui attached  segment">
                       <div class="ui padded segment m-padded-tb-large m-opacity" th:each="blog : ${pageInfo.list}">
                           <div class="ui mobile reversed stackable grid">
                               <div class="eleven wide column">
                                   <h3 class="ui header"><a href="#" class="m-black" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">你真的理解什么是财富自由吗？</a></h3>
                                   <p class="m-text" th:text="|${blog.description}......|">我们一生所做的所有事，都在不断消耗着一去不返的时间。如果所做的事情能够让自己有所收获，那么付出的时间就可以视作“被出售”了。而我们每个人奋斗的本质，其实就是提升自己的单位时间售价。从这个角度看过去，那些对个人成长帮助极低甚至毫无帮助的事情所消耗的时光，都被我们贱卖甚至抛弃了。</p>
                                   <div class="ui grid">
                                       <div class="eleven wide column">
                                           <div class="ui mini link list horizontal">
                                               <div class="item">
                                                   <img src="https://unsplash.it/100/100?image=1002" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}">
                                                   <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">明月</a></div>
                                               </div>
                                               <div class="item">
                                                   <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-11-01</span>
                                               </div>
                                               <div class="item">
                                                   <i class="eye icon"></i><span th:text="${blog.views}">2345</span>
                                               </div>
                                           </div>
                                       </div>
                                       <div class="right aligned five wide column">
                                           <a href="#" class="ui teal basic  label" target="_blank" style="padding: 0.2em;font-weight: 300;" th:text="${blog.type.name}">认知提升</a>
                                       </div>
                                   </div>
                               </div>
                               <div class="five wide column">
                                   <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
                                       <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image" th:src="@{${blog.firstPicture}}">
                                   </a>
                               </div>
                           </div>
                       </div>
                   </div>
                   <!--底部内容-->
                   <div class="ui bottom attached segment" th:if="${pageInfo.pages}>1">
                       <div class="ui middle aligned two column grid">
                           <div class="column">
                               <a href="" class="ui mini teal basic  button" th:href="@{/(pageNum=${pageInfo.prePage})}"  th:if="${pageInfo.hasPreviousPage}">上一页</a>
                           </div>
                           <div class="right aligned column">
                               <a href="" class="ui mini teal basic  button" th:href="@{/(pageNum=${pageInfo.nextPage})}"  th:if="${pageInfo.hasNextPage}">下一页</a>
                           </div>
                       </div>
                   </div>

               </div>
               <!--右边的top-->
               <div class="five wide column">
                   <!--分类-->
                   <div class="ui segments">
                       <div class="ui secondary segment">
                           <div class="ui two column grid">
                               <div class="column">
                                   <i class="idea icon"></i>分类
                               </div>
                               <div class="right aligned column">
                                   <a href="" target="_blank" th:href="@{types/-1}">more <i class="angle double right icon"></i></a>
                               </div>
                           </div>
                       </div>
                       <div class="ui segment teal">
                           <div class="ui vertical menu">
                               <a href="#" class="item" target="_blank" th:href="@{/types/{id}(id=${type.id})}" th:each="type : ${types}">
                                   <span th:text="${type.name}">学习日志</span>
                                   <div class="ui teal basic left pointing label" th:text="${#arrays.length(type.blogs)}">13</div>
                               </a>

                           </div>
                       </div>
                   </div>
                   <!--标签-->
                   <div class="ui segments">
                       <div class="ui secondary segment">
                           <div class="ui two column grid">
                               <div class="column">
                                   <i class="tags icon"></i>标签
                               </div>
                               <div class="right aligned column">
                                   <a href="" target="_blank" th:href="@{tags/-1}">more <i class="angle double right icon"></i></a>
                               </div>
                           </div>
                       </div>
                       <div class="ui teal segment">
                           <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny" th:each="tag : ${tags}" th:href="@{/tags/{id}(id=${tag.id})}">
                               <span th:text="${tag.name}">方法论</span> <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
                           </a>
                       </div>
                   </div>
                   <!--最新推荐-->
                   <!--标签-->
                   <div class="ui segments m-margin-top-large">
                       <div class="ui secondary segment">
                           <div class="ui two column grid">
                               <div class="column">
                                   <i class="bookmark icon"></i>最新推荐
                               </div>
                           </div>
                       </div>
                       <div class="ui segment" th:each="blog : ${recommendBlogs}">
                           <a href="#" target="_blank" class="m-black m-text-thin" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">用户故事(USer Story)</a>
                       </div>
                   </div>
                   <!--二维码-->
                   <h5 class="ui horizontal divider header">扫码关注我</h5>
                   <div class="ui centered card" style="width: 10em ">
                       <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}"  class="ui rounded image" alt="">
                   </div>
               </div>
           </div>
       </div>
   </div>
   <!--中间内容-->

   <!--底部footer-->
   <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"></footer>
   <!--底部footer-->

   <!--引入js-->
   <th:block th:replace="_fragments :: script"></th:block>
   <!--引入js-->

   <script>
       $('.menu.toggle').click(function () {
           $('.m-item').toggleClass('m-mobile-hide');
       });

   </script>
</body>
</html>